<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>product</title>
    <link rel="StyleSheet" href="../css/catalog.css" type="text/css" media="screen" />
    <link rel="StyleSheet" href="../css/common.css" type="text/css" media="screen" />
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!--    <script src="../js/test.js"></script>-->
</head>
<body>
<div th:replace="common/top1"></div>
<div id="w">
    <div id="BackLink">
        <a th:href="@{/categoryForm(categoryId=${product.category})}" th:text="' Return to ' + ${product.category}">
            Return to ${category.name}</a>
    </div>
    <div id="Catalog">
        <div th:if="${product}">
            <div th:text="${product.name}" id="petName"> product.name </div>
<!--            <div id="popLayer">-->
<!--                <div id="popBox">-->
                    <div class="content" id="popLayer" style="text-align: center;background-color: #ffffff;">
                        <span class="cartMsg">提示:成功加入购物车!</span>
                    </div>
<!--                </div>-->
<!--            </div>-->
            <table class="showGoods">
                <tr id="head">
<!--                    <th></th>-->
                    <th>Item ID</th>
                    <th>Product ID</th>
                    <th>Description</th>
                    <th>List Price</th>
                    <th>operate</th>
                </tr>
                <tr th:each="item:${itemList}">
                    <td>
                        <a class="catalogTableLink" th:href="@{/itemForm(itemId=${item.itemid})}" th:text="${item.itemid}">itemName</a>
                    </td>
                    <td th:text="${item.productid}">item.product.productId</td>
<!--                    <td th:text="${item.attr1} + ' ' + ${item.attr2} + ' ' + ${item.attr3} + ' ' + ${item.attr4} + ' ' + ${item.attr5} + ' ' + ${product.name}">-->
<!--                    <td th:text="${item.attr1} + ' ' + ${item.attr2} + ' ' + ${item.attr3} + ' ' + ${item.attr4} + ' ' + ${item.attr5}">-->
<!--                    item.attribute1-4 product.name-->
                    </td>
                    <td>
                        <span th:if="${!#strings.isEmpty(item.attr1)}" th:text="${item.attr1}"> </span>
                        <span th:if="${!#strings.isEmpty(item.attr2)}"> </span>
                        <span th:if="${!#strings.isEmpty(item.attr2)}" th:text=" ' ' + ${item.attr2}"> </span>
                        <span th:if="${!#strings.isEmpty(item.attr3)}" th:text=" ' ' + ${item.attr3}"> </span>
                        <span th:if="${!#strings.isEmpty(item.attr4)}" th:text=" ' ' + ${item.attr4}"> </span>
                        <span th:if="${!#strings.isEmpty(item.attr5)}" th:text=" ' ' + ${item.attr5}"> </span>
                    </td>

<!--                    <td th:text="${#numbers.formatDecimal(item.listprice, 2, 'COMMA', '$')}">price</td>-->
                    <td th:text="'$' + ${item.listprice}">price</td>
                    <td>
                        <a id="addLink" th:onclick="add([[${item.itemid}]]);" class="Button">Add to Cart</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>

<!--    <div id="petName"> sessionScope.product.name </div>-->
<!--    <table class="showGoods">-->
<!--        <tr id="head">-->
<!--            <th>Item ID</th>-->
<!--            <th>Product ID</th>-->
<!--            <th>Description</th>-->
<!--            <th>List Price</th>-->
<!--            <th>&nbsp</th>-->
<!--        </tr>-->
<!--        <tr>-->
<!--            <td>-->
<!--                <a class="catalogTableLink">itemName</a>-->
<!--            </td>-->
<!--            <td>item.product.productId</td>-->
<!--            <td>-->
<!--                item.attribute1-4 product.name-->
<!--            </td>-->
<!--            <td>price</td>-->
<!--            <td>-->
<!--                <a href="addItemToCart?workingItemId=${item.itemId}&token=${sessionScope.token}" class="Button">Add to Cart</a>-->
<!--            </td>-->
<!--        </tr>-->
<!--    </table>-->
<!--    </div>-->
</div>

<div th:replace="common/bottom"></div>
<script src="../js/searchBykeyWord.js"></script>


<script th:inline="javascript">
    function add(itemId) {
        $.ajax({
            type: 'GET',
            url: '/user/addToCart?itemId=' + itemId,
            success: function (data) {
                console.log(data);
                var popLayer = document.getElementById("popLayer");
                popLayer.innerHTML = "<span class=\"cartMsg\">"+ data.message + "</span>"
                // popLayer.html("")
                // 设置定时关闭时间（1.2秒后关闭）
                setTimeout(function() {
                    popLayer.style.display = 'none';
                }, 1200);
                popLayer.style.display = "block";
            },
            error: function (errorMsg) {
                console.log(errorMsg);
            }
        });
    };
</script>
</body>
</html>